<template>
  <nav class="sidebar">
    <div class="sidebar-header">
      <h1 class="logo">感情解忧站</h1>
    </div>
    <ul class="nav-links">
      <li>
        <router-link to="/" class="nav-link" active-class="active">
          <span class="icon">🏠</span>
          <span class="link-text">首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/questions" class="nav-link" active-class="active">
          <span class="icon">❓</span>
          <span class="link-text">情感问答</span>
        </router-link>
      </li>
      <li>
        <router-link to="/ai-analysis" class="nav-link" active-class="active">
          <span class="icon">🤖</span>
          <span class="link-text">AI情感解析</span>
        </router-link>
      </li>
      <li>
        <router-link to="/share" class="nav-link" active-class="active">
          <span class="icon">📝</span>
          <span class="link-text">分享故事</span>
        </router-link>
      </li>
      <li>
        <router-link to="/stories" class="nav-link" active-class="active">
          <span class="icon">📖</span>
          <span class="link-text">情感树洞</span>
        </router-link>
      </li>
      <li>
        <router-link to="/about" class="nav-link" active-class="active">
          <span class="icon">ℹ️</span>
          <span class="link-text">关于我们</span>
        </router-link>
      </li>
    </ul>
    
    <!-- 管理员登录链接（仅在未登录时显示） -->
    <div v-if="!userState.isAuthenticated" class="admin-login-section">
      <router-link to="/admin/login" class="admin-login-link">
        <span class="icon">🔐</span>
        <span class="link-text">管理员登录</span>
      </router-link>
    </div>
    
    <!-- 用户状态区域 -->
    <div class="user-section">
      <div v-if="userState.isAuthenticated" class="user-info">
        <div class="user-avatar">👤</div>
        <div class="user-details">
          <p class="username">{{ userState.currentUser.username }}</p>
          <p v-if="userState.currentUser.isMember" class="member-badge">会员用户</p>
          <router-link v-if="userState.currentUser.isMember" to="/member" class="member-link">会员专区</router-link>
          <button v-if="!userState.currentUser.isMember" @click="handleUpgrade" class="upgrade-btn">升级为会员</button>
          <button @click="handleLogout" class="logout-btn">登出</button>
        </div>
      </div>
      <div v-else class="login-prompt">
        <p>登录后可享受更多功能</p>
        <router-link to="/auth" class="login-btn">登录/注册</router-link>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <p class="copyright">© 2024 感情解忧站</p>
    </div>
  </nav>
</template>

<script>
import { userStore } from '../stores/user'

export default {
  name: 'Sidebar',
  computed: {
    userState() {
      const state = userStore.getState()
      return {
        isAuthenticated: state.isAuthenticated,
        currentUser: state.currentUser
      }
    }
  },
  methods: {
    handleLogout() {
      userStore.logout()
      this.$router.push('/')
    },
    handleUpgrade() {
      const result = userStore.upgradeToMember()
      if (result.success) {
        alert(result.message)
      } else {
        alert(result.message)
      }
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 250px;
  height: 100vh;
  background: linear-gradient(180deg, #ff9a9e 0%, #fad0c4 100%);
  color: white;
  position: fixed;
  transition: all 0.3s ease;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
}

.sidebar-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0;
}

.nav-links {
  list-style: none;
  padding: 20px 0;
  flex-grow: 1;
}

.nav-links li {
  margin-bottom: 5px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 15px 15px;
  text-decoration: none;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  border-radius: 0 30px 30px 0;
  margin-right: 5px;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

.nav-link.active {
  background-color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
}

.nav-link .icon {
  font-size: 1.2rem;
  margin-right: 10px;
}

.sidebar-footer {
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 管理员登录链接样式 */
.admin-login-section {
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-login-link {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.admin-login-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.admin-login-link .icon {
    font-size: 1.2rem;
    margin-right: 15px;
  }
  
  /* 用户状态区域 */
.user-section {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  margin: 10px;
}

.user-avatar {
  font-size: 1.5rem;
  margin-right: 10px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
}

.member-badge {
  font-size: 0.8rem;
  color: #ffd700;
  font-weight: bold;
  margin-bottom: 5px;
}

.member-link {
  font-size: 0.8rem;
  color: #ffd700;
  font-weight: bold;
  margin-bottom: 5px;
  text-decoration: none;
  background-color: rgba(255, 215, 0, 0.2);
  padding: 3px 8px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.member-link:hover {
  background-color: rgba(255, 215, 0, 0.3);
  text-decoration: none;
}

.upgrade-btn {
  background-color: #ffd700;
  color: #333;
  border: none;
  padding: 5px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.3s;
  margin-bottom: 5px;
}

.upgrade-btn:hover {
  background-color: #ffc400;
}

.logout-btn {
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #ff5252;
}

.login-prompt {
  padding: 15px;
  text-align: center;
}

.login-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #ff9a9e;
  padding: 8px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.login-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 70px;
  }
  
  .logo {
    font-size: 1rem;
  }
  
  .link-text {
    display: none;
  }
  
  .nav-link {
    justify-content: center;
    padding: 15px 10px;
  }
  
  .nav-link .icon {
    margin-right: 0;
    font-size: 1.5rem;
  }
  
  .sidebar-header,
  .sidebar-footer {
    padding: 10px;
  }
  
  .admin-login-section {
    padding: 10px;
  }
  
  .admin-login-link {
    justify-content: center;
    padding: 10px 5px;
  }
  
  .admin-login-link .icon {
    margin-right: 0;
    font-size: 1.5rem;
  }
  
  .user-section {
    padding: 10px;
  }
  
  .user-avatar {
    font-size: 1.5rem;
    margin-right: 5px;
  }
  
  .username {
    font-size: 0.8rem;
  }
  
  .logout-btn,
  .login-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 0;
    overflow: hidden;
  }
}
</style>